<style>
    /*.el-table .cell{padding:0;}
   .content-rowspan div {
        text-indent:5px;
        line-height: 28px;
        border-bottom: 1px solid rgb(236, 223, 223);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .content-rowspan div:last-child {
        border-bottom: 0;
    }*/
    .content-rowspan .name-wrapper{text-indent:5px;line-height:28px;border-bottom: 1px solid rgb(236, 223, 223);overflow: hidden;text-overflow: ellipsis;}
    .content-rowspan:last-child div{border-bottom:0;}
    .el-popover{border-color:rgb(61, 34, 31);background:rgb(61, 34, 31);color:#fff;border-radius:4px;}
    .el-popover .popper__arrow{border-top:rgb(236, 223, 223);}
    .el-popover[x-placement^="top"] .popper__arrow::after{bottom: 0px;border-top-color:rgb(61, 34, 31);}
</style>
<template>
    <div class="replacement-confirmation-page">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
            <el-form-item label="法人名称" class="selectMB10" v-if="!powerFlag1">
                <el-input size="mini" v-if="legalPersonDropDown.length==1" disabled v-model="formInline.legalPersonName" placeholder=""></el-input>
                <el-select size="mini" clearable v-else  v-model="formInline.legalPersonId" placeholder="请选择" @change="changeLegalPerson">
                    <el-option v-for="(legalPerson,index) in legalPersonDropDown" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计划编号" class="selectMB10">
                <el-input size="mini" v-model="formInline.planCode" placeholder="请输入计划编号"></el-input>
            </el-form-item>
            <el-form-item label="提交日期" class="selectMB10">
                <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createTimeBegin"  placeholder="请选择" @change="selectedCreateTimeBegin"></el-date-picker>
                &nbsp;至&nbsp;
                <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createTimeEnd" placeholder="请选择" @change="selectedCreateTimeEnd"></el-date-picker>
            </el-form-item>
            <el-form-item label="计划备件编号" class="selectMB10">
                <el-input size="mini" v-model="formInline.planMaterialCode" placeholder="请输入计划备件编号"></el-input>
            </el-form-item>
            <el-form-item label="计划备件名称" class="selectMB10">
                <el-input size="mini" v-model="formInline.planMaterialName" placeholder="请输入计划备件名称"></el-input>
            </el-form-item>
            <el-form-item label="替换备件编号" class="selectMB10">
                <el-input size="mini" v-model="formInline.replaceMaterialCode" placeholder="请输入替换备件编号"></el-input>
            </el-form-item>
            <el-form-item label="替换备件名称" class="selectMB10">
                <el-input size="mini" v-model="formInline.replaceMaterialName" placeholder="请输入替换备件名称"></el-input>
            </el-form-item>
            <el-form-item label="状态" class="selectMB10">
                <el-select v-model="formInline.status" placeholder="请选择" size="mini" clearable>
                    <el-option v-for="(statusObj,index) in statusLists" :key="index" :label="statusObj.label" :value="statusObj.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="提交人员" class="selectMB10">
                <el-input size="mini" v-model="formInline.createUserName" placeholder="请输入提交人员"></el-input>
            </el-form-item>
            <el-form-item label="通过人员" class="selectMB10">
                <el-input size="mini" v-model="formInline.updateUserName" placeholder="请输入通过人员"></el-input>
            </el-form-item>
            <el-form-item class="selectMB10">
                <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <label class="default-label">替换确认列表</label>
        <el-table :data="collapseItemData" border style="width: 100%;">
            <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
            <el-table-column header-align="center" align="center" label="操作" >
                <template scope="scope">
                    <div class="operationItem bolder" v-if="scope.row.status==1 && powerFlag" @click="updateStatus(scope.row.id, 2)">通过</div>
                    <div class="operationItem bolder disabled" v-else-if="scope.row.status!=1 && powerFlag">通过</div>
                    <div class="operationItem bolder" v-if="scope.row.status==1 && powerFlag" @click="updateStatus(scope.row.id, 3)">不通过</div>
                    <div class="operationItem bolder disabled" v-else-if="scope.row.status!=1 && powerFlag">不通过</div>
                </template>
            </el-table-column>
            <el-table-column prop="planCode" label="计划编号" header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.planCode }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.planCode }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="planMaterialCode" label="计划备件编码" header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.planMaterialCode }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.planMaterialCode }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="planMaterialName" label="计划备件名称" header-align="center" show-overflow-tooltip>
                 <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.planMaterialName }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.planMaterialName }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="planMaterialUnit" label="计量单位" header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.planMaterialUnit }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.planMaterialUnit }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="planMaterialQuantity" label="计划数量" header-align="center">
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.planMaterialQuantity }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.planMaterialQuantity }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="replaceMaterialCode" label="替换备件编码" header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.replaceMaterialCode }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.replaceMaterialCode }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="replaceMaterialName" label="替换备件名称" header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.replaceMaterialName }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.replaceMaterialName }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="replaceMaterialUnit" label="计量单位" header-align="center" show-overflow-tooltip>
                <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.replaceMaterialUnit }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.replaceMaterialUnit }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="replaceQuantity" label="替换数量" header-align="center">
                 <template scope="scope">
                    <el-popover class="content-rowspan" trigger="hover" placement="top"  v-for="(item,index)  in scope.row.detailList" :key="index">
                        <p>{{ item.replaceQuantity }}</p>
                        <div slot="reference" class="name-wrapper">
                            {{ item.replaceQuantity }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>            
        </el-table>
        <!--分页-->
        <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageIndex"
                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="totalPage" :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                statusLists:[],   //确认状态下拉列表中的值
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                totalNumber: 20,
                totalPage:2,
                isPaging:false,
                legalPersonDropDown:[], //法人名称
                formInline:{
                    legalPersonName:'',
                    legalPersonId:'',
                    planCode:'',
                    createTimeBegin:'',
                    createTimeEnd:'',
                    planMaterialCode:'',
                    planMaterialName:'',
                    replaceMaterialCode:'',
                    replaceMaterialName:'',
                    status:'',
                    createUserName:'',
                    updateUserName:''
                },
                loading:false,
                // 表格
                collapseItemData: [],
                formLabelWidth: '100px',
                activeNames: [],
                //权限
                powerFlag:false,
                powerFlag1:false,   // 本部人员
                //查询禁用
                selectDisabled:false

            };
        },
        computed:{
            identity(){
                return this.$store.state.identity;
            },
            powerData(){
                return this.$store.state.powerData;
            }
        },
        watch:{
            powerData(){
                var _this=this;
                for(var i=0;i<_this.powerData.length;i++){
                    if(_this.powerData[i]=="ROLE_security_replaceConfirmation_operation"){
                        //替换确认权限
                        _this.powerFlag=true;
                    }
                }
            },
            identity(){
                var _this=this;
                if(_this.identity == 1){  //是本部人员
                    _this.legalPersonDropDownValue();
                }
                if(_this.identity == 2){
                    _this.powerFlag1 = true;   //是业务合作人员
                }
            }
        },
        //进入页面立即运行此方法
        mounted: function () {
            var _this = this;
            this.$store.commit('currentActive', 'ReplacementConfirmation');
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            if(_this.identity == 1){  //是本部人员
                _this.legalPersonDropDownValue();
            } 
            if(_this.identity == 2){
                _this.powerFlag1 = true;   //是业务合作人员
            }
            // 获取当前系统的时间
            var myDate=new Date();
            _this.formInline.createTimeEnd=myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();
            _this.formInline.createTimeBegin=myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+(myDate.getDate()-7);
            _this.handleQuery();

            _this.dropDownValue();//查询条件状态
            //判断权限
            for(var i=0;i<_this.powerData.length;i++){
                if(_this.powerData[i]=="ROLE_security_replaceConfirmation_operation"){
                    //替换确认权限
                    _this.powerFlag=true;
                }
            }
        },
        methods: {
            handleChange(){
                console.log();
            },
            // 提交日期格式化
            selectedCreateTimeBegin(val){
                var _this=this;
                _this.formInline.createTimeBegin = val;
                if(_this.formInline.createTimeEnd && val >= _this.formInline.createTimeEnd){
                    _this.common.errorTip("提交开始日期不能大于等于提交结束日期");
                    _this.formInline.createTimeBegin = "";
                };
            },
            selectedCreateTimeEnd(val){
                var _this=this;
                _this.formInline.createTimeEnd = val;
                if(_this.formInline.createTimeBegin && val <= _this.formInline.createTimeBegin){
                    _this.common.errorTip("提交结束日期不能小于等于提交开始日期");
                    _this.formInline.createTimeEnd = "";
                };
            },
            legalPersonDropDownValue(){  //法人名称下拉列表值
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"legalPerson/ofCurrentUser",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.legalPersonDropDown = data.data;
                            if(_this.legalPersonDropDown.length == 1){
                                _this.formInline.legalPersonId = _this.legalPersonDropDown[0].id;
                                _this.formInline.legalPersonName = _this.legalPersonDropDown[0].legalPersonName;  
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 选择法人名称  
            changeLegalPerson(){
                var _this = this;
                for(var i=0;i<_this.legalPersonDropDown.length;i++){
                    if(_this.formInline.legalPersonName==_this.legalPersonDropDown[i].id){
                        _this.formInline.legalPersonId=_this.legalPersonDropDown[i].id;
                    }
                }
            },
            // 替换确认查询
            handleQuery(){
                var _this=this;
                _this.loading=true;
                var tmp={legalPersonId:_this.formInline.legalPersonId,planCode: _this.formInline.planCode, createTimeStart: _this.formInline.createTimeBegin, createTimeEnd: _this.formInline.createTimeEnd,planMaterialCode: _this.formInline.planMaterialCode, planMaterialName: _this.formInline.planMaterialName, replaceMaterialCode: _this.formInline.replaceMaterialCode, replaceMaterialName: _this.formInline.replaceMaterialName,status: _this.formInline.status, creatorName: _this.formInline.createUserName,updaterName: _this.formInline.updateUserName, pageIndex: _this.pageIndex, pageSize: _this.pageSize};
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"materialReplaceAffirm/queryPage",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            _this.collapseItemData=data.data.dataList;
                            for(var i=0;i<_this.collapseItemData.length;i++){
                                _this.activeNames.push(_this.collapseItemData[i].id);
                            }
                            _this.isPaging=true;
                            _this.totalPage=data.data.totalPage;
                            _this.totalNumber=data.data.totalNumber;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;   
                    }
                });
            },
            updateStatus(id, status) {
                var _this=this;
                var tmp={materialReplaceAffirmId: id, status: status};
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"materialReplaceAffirm/approve",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.handleQuery();
                            _this.common.successTip("操作成功！");
                        }else
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            //替换确认查询条件状态下拉框初始化
            dropDownValue(){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+'materialReplaceAffirm/searchInitParameter',
                    cache:false,
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success:function(data){
                        if(data.success){
                            _this.statusLists = data.data.statusList;    //替换确认状态
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //   分页
            handleSizeChange(val) {
                var _this=this;
                _this.pageSize=val;
                _this.handleQuery(_this.pageIndex, _this.pageSize);

            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                var _this=this;
                _this.pageIndex=val;
                _this.handleQuery(_this.pageIndex, _this.pageSize);
            }
        }
    }
</script>



